<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>vue</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <style>
        .diffTags-enter {
          transform: translateX(100px);
          background-color: gray;
          color: white;
        }
        .diffTags-enter-active {
          transition: all 1s;
        }
        .diffTags-enter-to {
          transform: translateX(0);
          background-color: red;
          color: yellow;
        }
        .diffTags-leave {
          transform: translateX(0);
          background-color: gray;
          color: white;
        }
        .diffTags-leave-active {
          transition: all 1s;
        }
        .diffTags-leave-to {
          transform: translateX(-100px);
          background-color: red;
          color: yellow;
        }
        h4,
        p {
          display: inline-block;
          width: 100px;
        }
        .tags-enter {
          transform: translateX(100px);
        }
        .tags-enter-active {
          transition: all 1s;
        }
        .tags-enter-to {
          transform: translateX(0);
        }
        .tags-leave {
          transform: translateX(0);
        }
        .tags-leave-active {
          transition: all 1s;
        }
        .tags-leave-to {
          transform: translateX(-100px);
        }
      </style>
</head>

<body>
    <div id='app'>
        <div>
            <transition name="diffTags">
                <!-- <h4 v-if="!Object.keys(user).length">暂时没有数据</h4> -->
                <h4 v-if="!user">暂时没有数据</h4>
                <p v-else>{{user.name}}--{{user.age}}</p>
            </transition>
        </div>
    </div>

    <div>
        <transition name="tags" mode="in-out">
            <!-- <h4 v-if="!Object.keys(user).length">暂时没有数据</h4> -->
            <!-- 如果多元素过渡时，是相同的标签，记得加key。类似于v-for -->
            <p v-if="!user" key="none">暂时没有数据</p>
            <p v-else key="data">{{user.name}}-{{user.age}}</p>
        </transition>
    </div>

    <div>
        <button @click="setUser">setUser</button>
    </div>

    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                user: null, // 条件判断中，{}/[] 都是true。
            },
            methods: {
                setUser() {
                    this.user = {
                        name: '小明',
                        age: 22
                    }
                }
            }
        });
    </script>

</body>

</html>